Ext.define('pm.view.Project.Edit', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.ProjectEdit',

    title : 'Edit Project',

    layout: 'fit',
    autoShow: true,
    frame: false,
    border: false,
    defaultImg: 'images/pm/project-default.svg',

    initComponent: function() {
        this.photo = Ext.create('Ext.Img', {
            src: this.defaultImg,
            flex: 1,
        });
        this.usersOfProject = Ext.create('pm.view.Project.ProjectMembers', {
            flex: 1,
        });


        this.items = [
            {
                xtype: 'form',
                frame: false,
                border: false,
                layout: {
                    type: 'hbox',
                    pack: 'start',
                    align: 'stretch'
                },
                items: [
                    {
                        xtype: 'container',
                        padding: '10px',
                        flex: 1,
                        items: [
                            {
                                xtype: 'textfield',
                                name : 'name',
                                blankText: 'Type name',
                                emptyText: 'Type name',
                                allowBlank: false,
                            },
                            {
                                xtype: 'textfield',
                                emptyText: 'Type e-mail',
                                name : 'email',
                            },
                            {
                                xtype: 'filefield',
                                emptyText: 'Select an photo',
                                name: 'photo_path',
                                buttonText: '',
                                buttonConfig: {
                                    iconCls: 'upload-icon'
                                }
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        padding: '10px',
                        flex: 1,
                        layout: {
                            type: 'vbox',
                            pack: 'end',
                        },

                        items: [
                            this.photo, 
                            this.usersOfProject
                        ]
                    },
                ]
            }
        ];

        view = this
        this.buttons = [
            {
                text: 'Save',
                action: 'save',
                handler: function() {
                    view.fireEvent('saveUser', view)
                }
            },
        ];

        this.callParent(arguments);

    },

    setRecord: function(record) {
        console.log('image change=' + record.get('photo_path'))

        this.down('form').loadRecord(record);
        if(record.get('photo_path')) {
            this.photo.setSrc(record.get('photo_path'))
        } else {
            this.photo.setSrc(this.defaultImg)
        }

        this.usersOfProject.projectRecord = record

        var store = Ext.getStore('UsersOfProject')        
        store.suspendEvents();
        store.clearFilter();
        store.resumeEvents();
        store.filter({
            property: 'project_id',
            anyMatch: false,
            value   : record.get('id')
        });
    },
});